<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.lei.entity.Product" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <title>My JSP 'main.jsp' starting page</title>	
    
    <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
    <link href="style/bootstrap.min.css" rel="stylesheet">
    
 	<style type="text/css">
 		.tit{
 			padding-left:40%;
 		}
 		.ha{
 			padding-left:35%;
 		}
 	</style>
    
  </head>
  
  <body>
  
  	<div id="product"></div>
  
  
  		<h3 class="tit">已有商品列表</h3><br/><br/>
  
  			<table id="mytable" class="zebra-striped">
				<thead id="thead">
					<tr>
						<th>商品编号</th>
						<th>名称</th>
						<th>价格</th>
						<th>是否上架</th>
						<th>操作</th>
					</tr>
				</thead>
			
				<tbody id="tbody">
				<% 
				List<Product> list=(List<Product>)session.getAttribute("prolist");
				for(Product p:list){
				%>
					<tr>
						<td><%=p.getId() %></td>
						<td><%=p.getName() %></td>
						<td>￥<%=p.getPrice() %></td>
						<td><%=p.isShangjia()?"Yes":"No" %></td>
						<td>
							<a id="chakan" href="javascript:void(0)">查看</a>
						</td>
					</tr>
					
				<%} %>
				</tbody>
  	
  			</table>
  	

  			<div>
  			<h3 class="tit">添加商品</h3>
  			<div class="ha">商品编号：<input type="text" id="proid" value="" /></div><br/>
  			<div class="ha">商品名称：<input type="text" id="proname" value="" /></div><br/>
  			<div class="ha">商品价格：<input type="text" id="proprice" value="" /></div><br/>
  			<div class="ha">是否上架：<input id="up" type="radio" name="r" value="yes" checked="checked" />是
  			<input id="up" type="radio" name="r" value="No" />否</div><br/>
  			<div class="ha">
  				<input type="button" id="add" value="Add" onclick="sendAjax()" />
  			</div>
  		</div>

  	
  	<script type="text/javascript">	
		
		var xmlHttp;
		function createxmlHttp(){
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				xmlHttp=new XMLHttpRequest();
			}
		}
		
		
		function sendAjax(){
			createxmlHttp();
			
			var id=document.getElementById("proid").value;
			var name=document.getElementById("proname").value;
			var price=document.getElementById("proprice").value;
			
			/*xmlHttp.open("POST", "ajax.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.send("name="+name);*/
			xmlHttp.onreadystatechange=callback;
			
			xmlHttp.open("GET","ajax.jspx?id="+id+"&name="+name+"&price="+price,true);
			xmlHttp.send();
		}
		
		function callback(){
			if(xmlHttp.readyState == 4) {
				if(xmlHttp.status == 200) {
					var xml = xmlHttp.responseXML;
					
					var bianhaos=xml.getElementsByTagName("bianhao");
					var names=xml.getElementsByTagName("name");
					var prices=xml.getElementsByTagName("price");
					var shangjias=xml.getElementsByTagName("shangjia");
					
					var bianhao=bianhaos[bianhaos.length-1].childNodes[0].nodeValue;
					var name=names[names.length-1].childNodes[0].nodeValue;
					var price=prices[prices.length-1].childNodes[0].nodeValue;
					var shangjia=shangjias[shangjias.length-1].childNodes[0].nodeValue;
						
					var tr=document.createElement("tr");
					var td1=document.createElement("td");
					td1.appendChild(document.createTextNode(bianhao));
					
					var td2=document.createElement("td");
					td2.appendChild(document.createTextNode(name));
					
					var td3=document.createElement("td");
					td3.appendChild(document.createTextNode("￥"+price));
					
					var td4=document.createElement("td");
					td4.appendChild(document.createTextNode(shangjia?"Yes":"No"));
					
					var td5=document.createElement("td");
					var a=document.createElement("a");
					a.setAttribute("href", "javascript:void(0)");
					a.setAttribute("id", "chakan");
					a.appendChild(document.createTextNode("查看"));
					td5.appendChild(a);
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					
					document.getElementsByTagName("tbody")[0].appendChild(tr); 
					
					document.getElementById("proid").value="";
					document.getElementById("proname").value="";
					document.getElementById("proprice").value="";
					
				} else {
					alert("Ajax Error!");
				}
			}
		}
		
		document.getElementById("chakan").onclick=chaKan;
			
			function chaKan(){
				var id=document.getElementById("proid").value;
				alert(id);
				/*xmlHttp.open("POST", "ajax.jspx", true);
	  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	  			xmlHttp.send("name="+name);*/
				//xmlHttp.onreadystatechange=chakanback;
				
				//xmlHttp.open("GET","chakan.jspx?id="+id+"&name="+name+"&price="+price,true);
				//xmlHttp.send();
			}
			
			function chakanback(){
			if(xmlHttp.readyState == 4) {
				if(xmlHttp.status == 200) {
					var xml = xmlHttp.responseXML;
					
					document.getElementById("proid").value="";
					document.getElementById("proname").value="";
					document.getElementById("proprice").value="";
					
				} else {
					alert("Ajax Error!");
				}
			}
		}
		
		
	</script>
  
  </body>
</html>
